<script lang="ts" setup>
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import { useSubPage } from './composables'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { getDialogueTopicList } from '@/services/api'
import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
import { ref, nextTick,watch } from 'vue'
import { useUserStore } from '@/stores'
const isAnimation = ref(false)
const userStore = useUserStore()
const {
  navBarInfo,
  userInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  navbarInitFinishHandle,
} = useSubPage()
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
const list = ref()
const total = ref()
const swiperArr = ref<Array>([])
onReady(() => {})
onShow(() => {
  getData()
})
// 监听全局变化
watch(
  () => userStore.getCurrentDrPage,
  (newv) => {
    console.log('userStore.getCurrentDrPage',newv);
    
    getData()
  }
)
const getRandomElement = (arr) => {
  console.log(arr)
  return arr[Math.floor(Math.random() * arr.length)]
}
onShareAppMessage((e) => {
  return {
    title: '语境佳',
    path: '/pages/dialogue/index',
  }
})
const refreshData = () => {
  userStore.cutCurrentDrPage(0)
  isAnimation.value = true
  getData()
}
const getData = () => {
  let obj = {
    grade: uni.getStorageSync('gradeData').grade || 1,
    page: userStore.getCurrentDrPage,
    pageSize: 6,
  }
  getDialogueTopicList(obj).then((res) => {
    const { code, data } = res
    console.log(userStore.currentDrPage)
    if (code === 0) {
      total.value = data.total
      if (data.dataList == null) {
        if (userStore.currentDrPage == 1 && data.total == 0) {
          uni.showToast({
            title: '当前教材设置下暂无数据',
            duration: 2000,
            icon: 'none',
          })
          list.value = []
        } else {
          userStore.cutCurrentDrPage(1)
          getData()
        }
      } else {
        list.value = data.dataList
        setTimeout(() => {
          isAnimation.value = false
        }, 1000)
      }
      // list.value = data.dataList
      // swiperArr.value = setTwoDimensionalArray(data.dataList)
    }
  })
}
const setTwoDimensionalArray = (list) => {
  const listResult = []
  for (let i = 0; i < Math.ceil(list.length / 4); i++) {
    listResult[i] = []
    for (let j = 0; j < 4; j++) {
      if (i === Math.ceil(list.length / 4) - 1) {
        if (Math.ceil(list.length % 4) !== 0) {
          if (j < Math.ceil(list.length % 4)) {
            listResult[i][j] = list[i * 4 + j]
          }
        } else {
          listResult[i][j] = list[i * 4 + j]
        }
      } else {
        listResult[i][j] = list[i * 4 + j]
      }
    }
  }
  return listResult
}
onPageScroll((e) => {})
const toActivePage = async (item) => {
	console.log( `/home-page/sceneTeaching/dialogueDetail/index?name=${item.topicChinese}`,"热热")
  if (userStore.getIfBindSn) {
    // tnNavPage(
    //   `/home-page/sceneTeaching/dialogIntroduce/index?id=${item.id}&name=${item.topicChinese}`
    // )
    tnNavPage(
      `/home-page/sceneTeaching/dialogueDetail/index?id=${item.id}&name=${item.topicChinese}`
    )
    // nextTick(()=>{
    //   item.isMem = 1
    // })
  } else {
    uni.showModal({
      title: '设备未激活',
      content: '学习英语需要长期坚持哦，超多权益等你来解锁',
      confirmText: '立即激活',
      cancelText: '放弃福利',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          userStore.toScanMate()
        } else if (res.cancel) {
          console.log('用户点击取消')
          tnNavPage('/pages/index/index', 'switchTab')
        }
      },
    })
  }
}

//调起微信小程序扫码
// const toScanMate = () => {
//   uni.scanCode({
//     onlyFromCamera: true, // 默认false，true为只允许从相机扫码
//     success: async (res) => {
//       console.info(res) //打印出来，查看自己想要的返回结果数据
//       // 拿SN码去绑定设备
//       await userStore.toBindUserSn(res.result)
//     },
//   })
// }
</script>

<template>
  <TnNavbar
    fixed
    home-icon=""
    home-text=""
    back-icon=" "
    back-text=" "
    bg-color="#f1f5fb"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
  >
    <view class="tn-color-black" style="font-size: 34rpx;">达人对话</view>
  </TnNavbar>
  <!-- 顶部背景 -->
  <view class="top-bg" />
  <!-- 页面内容 -->
  <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
    <view
      class="card-swiper"
      :circular="true"
      @click="tn('/pageA/navigation/navigation')"
      :autoplay="false"
      duration="500"
      interval="18000"
      @change="cardSwiper"
    >
      <view v-for="(item, index) in 1" :key="index" style="position: relative">
        <view class="swiper-item-text">
          <view class="banner-box">
            <view class="title">HI~</view>
            <view class="p1"> 我是你的口语教练 </view>
            <view class="p2"> 选择场景话题，进行对话 </view>
            <view class="btn">自定义对话场景</view>
          </view>
          <image
            class="banner-img"
            src="@/static/imgs/icons/dr_banner.png"
            mode="widthFix"
          >
          </image>
        </view>
      </view>
    </view>
    <view class="flex flex-js-sb flex-ai-center pt-20 pb-16 plr-8">
      <view class="listi-title font-size-16 font-w-bold">
        请选择口语话题 ({{ total }})
      </view>
      <view class="flex" @click="refreshData">
        <image
          class="mr-4 reset-icon"
          src="../../../static/imgs/refresh.png"
          :class="isAnimation ? 'refish' : ''"
        ></image>
        <view class="font-color-c666 font-size-12">换一批</view>
      </view>
    </view>
    <view
      class="tn-flex tn-flex-wrap br-16"
      style="justify-content: space-between"
    >
      <view
        class="special"
        v-for="(it, index) in list"
        :key="index"
        @click="toActivePage(it)"
      >
        <view
          class="tn-flex tn-flex-direction-column"
          style="
            height: 214rpx;
            color: #4473c8;
            border-radius: 28rpx 28rpx 0 0;
            box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(52, 103, 194, 0.08);
          "
          :style="{ 'background-color': it.color }"
        >
          <TnLazyLoad
            :src="it.picture"
            mode="aspectFill"
            class="item-icon"
          ></TnLazyLoad>
        </view>
        <view
          style="
            background-color: #fff;
            border-radius: 0 0 28rpx 28rpx;
            padding-left: 24rpx;
            padding-right: 24rpx;
            padding-top: 16rpx;
          "
        >
          <view class="tn-text-lg tn-text-bold flex flex-js-sb flex-ai-center">
            <view>
              <view class="font-size-16 en-name">{{ it.topicEnglish }}</view>
              <view class="font-size-14 font-color-c666 zh-name">{{
                it.topicChinese
              }}</view>
            </view>
            <image
              v-if="it.isMem == 1"
              src="@/static/imgs/finish_icon.png"
              mode="widthFix"
              class="finish-icon"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 轮播版本 -->
    <!-- <view
      class="tn-flex tn-flex-wrap br-16"
      style="justify-content: space-between"
    >
      <swiper
        class="swiper"
        circular
        :indicator-dots="true"
        :duration="300"
        indicator-color="#BBBAFF"
        indicator-active-color="#4B49E8"
        :interval="8000"
      >
        <swiper-item v-for="(item, index) in swiperArr">
          <view
            class="special"
            v-for="(it, index) in item"
            :key="index"
            @click="toActivePage(it)"
          >
            <view
              class="tn-flex tn-flex-direction-column"
              style="
                height: 214rpx;
                color: #4473c8;
                border-radius: 28rpx 28rpx 0 0;
                box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(52, 103, 194, 0.08);
              "
              :style="{ 'background-color': it.color }"
            >
              <image
                :src="it.picture"
                mode="aspectFill"
                class="item-icon"
              ></image>
            </view>
            <view
              style="
                background-color: #fff;
                border-radius: 0 0 28rpx 28rpx;
                padding-left: 24rpx;
                padding-right: 24rpx;
                padding-top: 26rpx;
              "
            >
              <view
                class="tn-text-lg tn-text-bold flex flex-js-sb flex-ai-center"
              >
                <text class="font-size-16" style="color: #000">{{
                  it.topicChinese
                }}</text>
                <image
                  v-if="it.isMem == 1"
                  src="@/static/imgs/finish_icon.png"
                  mode="widthFix"
                  class="finish-icon"
                ></image>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
:deep(.tn-navbar-back__text) {
  display: none !important;
}
.tn-navbar-back__text {
  display: none !important;
}
</style>
